<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>拼团</title>
  <link rel="stylesheet" href="./css/weui.min.css">
  <link rel="stylesheet" href="./css/public.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 顶部 -->
    <div class="head">
        <img src="./images/top.png" alt="">
    </div>
    <!-- 顶部 -->
    <!-- 活动简介 -->
    <div class="intro">
        <div class="weui_cells_title">
            <span>■</span>活动简介
        </div>
        <div class="weui_cells weui_cells_form">
            <div class="weui-cell clearfix">
                <div class="weui_cell_bd weui_cell_primary primary">
                <marquee><span id="title">史上最强优惠！祝贺心园米罗总部进驻万科创意园，触觉绘画常规班两个月8节课只要100元，暑假班24节课只要400元</span></marquee>
                </div>
            </div>
            <div class="weui_cell clearfix">
                <div class="weui_cell_hd">
                    <label for="" class="weui_label">活动主办方</label>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <span id="zbfName">长安心园米罗美术教育</span>
                </div>
            </div>
            <div class="weui_cell clearfix">
                <div class="weui_cell_hd">
                    <label for="" class="weui_label">主办方电话</label>
                </div>
                <div class="weui_cell_bd weui_cell_primary">                  
                    <span id="zbfPhone">已结束活动不提供号码咨询</span>
                </div>
            </div>
            <div class="weui_cell clearfix">
                <div class="weui_cell_hd">
                    <label for="" class="weui_label">最大召集</label>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <span id="maxperson">300</span>
                </div>
            </div>
            <div class="weui_cell clearfix">
                <div class="weui_cell_hd">
                    <label for="" class="weui_label">每批次人数</label>
                </div>
                <div class="weui_cell_bd weui_cell_primary">                   
                    <span id="num">10</span>
                </div>
            </div>
        </div>
    </div>
    <!-- 活动简介 -->
    <!-- 参团 -->
    <div class="attend">
        <div id="search">
            <div class="weui-search-bar weui-search-bar_focusing" id="Div2">
                <div class="weui-search-bar__box">
                    <i class="weui-icon-search"></i>
                    <input name="Keyword" type="text" maxlength="20" id="Keyword" class="weui-search-bar__input" placeholder="请输入团长的关键字" required="">
                    <a href="javascript:ClearSearch();" class="weui-icon-clear" id="searchClear"></a>
                </div>
                <label class="weui-search-bar__label" id="searchText">
                    <i class="weui-icon-search"></i>
                    <span>搜索</span>
                </label>
                <input type="submit" name="searchbnt" value="搜索" id="searchbnt" class="weui-search-bar__cancel-btn1">
            </div>
        </div>
        <!-- 参团列表 -->
        <div class="tuanList">
            <table class="list">
                <tr>
                    <th></th>
                    <th>团长 ↑</th>
                    <th>参团进度</th>
                    <th>尾号</th>
                    <th>参加活动</th>
                </tr>
                <tr>
                    <td class="num">1</td>
                    <td class="name">董亚阁</td>
                    <td class="schedule">
                        <span class="plan"></span>
                        <progress value="1" max="10">
                        </progress>
                    </td>
                    <td class="phone">8093</td>
                    <td class="activity"><a href="">活动结束</a></td>
                </tr>
                <tr>
                    <td class="num">2</td>
                    <td class="name">董亚阁</td>
                    <td class="schedule">
                        <span class="plan">10%</span>
                        <progress value="1" max="10">
                        </progress>
                    </td>
                    <td class="phone">8093</td>
                    <td class="activity"><a href="">活动结束</a></td>
                </tr>
                <tr>
                    <td class="num">3</td>
                    <td class="name">董亚阁</td>
                    <td class="schedule">
                        <span class="plan">10%</span>
                        <progress value="1" max="10">
                        </progress>
                    </td>
                    <td class="phone">8093</td>
                    <td class="activity"><a href="">活动结束</a></td>
                </tr>
                <tr>
                    <td class="num">4</td>
                    <td class="name">董亚阁</td>
                    <td class="schedule">
                        <span class="plan">10%</span>
                        <progress value="1" max="10">
                        </progress>
                    </td>
                    <td class="phone">8093</td>
                    <td class="activity"><a href="">活动结束</a></td>
                </tr>
            </table>
            <div class="tuanList-foot clearfix">
                <p class="fl">团数(<span>50</span>)</p>
                <ul class="tuanList-btn fr clearfix">
                    <li id="home-page"><a href=""><<</a></li>
                    <li id="previous-page"><a href=""><</a></li>
                    <li id="page"><a href="">1/2</a></li>
                    <li id="next-page"><a href="">></a></li>
                    <li id="last-page"><a href="">>></a></li>
                </ul>
            </div>
        </div>
        <!-- 参团列表 -->
    </div>
    
    <!-- 参团 -->
    <!-- 团信息 -->
    <div class="tuanBtn">
        <div class="clearfix">
            <a class="weui-btn weui-btn_warn weui-btn_mini " id="showForms">我要开团</a>
            <a class="weui-btn weui-btn_warn weui-btn_mini" style="margin-left: 1%" id="showTuans">我要参团</a>           
        </div>
        <div>
            <a class="weui-btn weui-btn_primary weui-btn_mini" id="showCode">添加主办方微信</a>
        </div>
        <div class="button-sp-area">
        </div>
    </div>
    <!-- 团信息 -->
    <!-- 我要开团 -->
    <div class="group">
        <div class="register">
            <form class="register-form" name="form" action="./index.html" method="post" id="form">
                <div class="name">
                  <p>姓名</p>
                  <input type="text" name="name" autocomplete="true">
                </div>
                <div class="phone">
                  <p>电话</p>
                  <input type="number" name="mobile" autocomplete="true">
                </div>
                <button class="btn-sub" type="submit" id="btn-sub">确认开团</button>
            </form>
        </div>
    </div>
    <!-- 我要开团 -->
    <!-- 添加主办方微信 -->
    <div class="show">
        <div class="wechat">
            <div class="we-title">主办方微信</div>
            <div class="code">
                <img src="./images/code.png" alt="">
                <p>识别二维码添加主办方微信</p>
            </div>
            <div>
                <a class="weui-btn weui-btn_primary" id="closeCode">关闭</a>
            </div>
        </div>
    </div>
    <!-- 添加主办方微信 -->
    <!-- 活动详情 -->
    <div class="detail">
        <div class="weui_cells_title">
            <span>■</span>活动详情
        </div>
        <div class="weui_cell clearfix">
            <div class="weui_cell_hd">
                <label for="" class="weui_label">活动时间</label>
            </div>
            <div class="weui_cell_bd weui_cell_primary">
                <span id="time">2018-11-10~2019-11-10</span>
            </div>
        </div>
    </div>
    <!-- 活动详情 -->
    <!-- 信息 -->
    <div class="infor">
        史上最强优惠！祝贺心园米罗总部进驻万科创意园，触觉绘画常规班两个月8节课只要100元，暑假班24节课只要400元史上最强优惠！祝贺心园米罗总部进驻万科创意园，触觉绘画常规班两个月8节课只要100元，暑假班24节课只要400元史上最强优惠！祝贺心园米罗总部进驻万科创意园，触觉绘画常规班两个月8节课只要100元，暑假班24节课只要400元史上最强优惠！祝贺心园米罗总部进驻万科创意园，触觉绘画常规班两个月8节课只要100元，暑假班24节课只要400元史上最强优惠！祝贺心园米罗总部进驻万科创意园，触觉绘画常规班两个月8节课只要100元，暑假班24节课只要400元史上最强优惠！祝贺心园米罗总部进驻万科创意园，触觉绘画常规班两个月8节课只要100元，暑假班24节课只要400元史上最强优惠！祝贺心园米罗总部进驻万科创意园，触觉绘画常规班两个月8节课只要100元，暑假班24节课只要400元史上最强优惠！祝贺心园米罗总部进驻万科创意园，触觉绘画常规班两个月8节课只要100元，暑假班24节课只要400元史上最强优惠！祝贺心园米罗总部进驻万科创意园，触觉绘画常规班两个月8节课只要100元，暑假班24节课只要400元史上最强优惠！祝贺心园米罗总部进驻万科创意园，触觉绘画常规班两个月8节课只要100元，暑假班24节课只要400元
    </div>
    <!-- 信息 -->
    <div class="fix">
        <div class="btn-audio btn-ani">
            <img src="./images/music.png" alt="">
            <audio id="music" autoplay="autoplay" loop="loop">
              <source src="{media $active['bgm']}" type="audio/mpeg" />
            </audio>
        </div>
        <div class="top">
            <p>共参与<span class="all">280</span>人 新生参与<span class="least">230</span>人</p>
        </div>
        <!-- <a href="javascript:;" class="foot">
            快速招生：我也要开展活动!
        </a> -->
    </div>
    <script src="./js/jquery.min.js"></script>
    <script>
        // 音乐控制器
        $(function(){
            var audio=document.getElementById('music');    
            $('.btn-audio').click(function(){
                if(audio.paused){
                    $('.btn-audio').addClass('btn-ani');
                    audio.play();
                    return;
                }else{
                    $('.btn-audio').removeClass('btn-ani');
                    audio.pause(); 
                }
            });
        });
        $(function() {
            //我要参团
            $('#showTuans').on('click', function() {
                $('.attend').show();
                $(this).hide();
                $('#showForms').removeClass('weui-btn_mini').css('width', '100%');
            });
            //添加主办方微信
            $('#showCode').on('click', function() {
                $('.show').show();
            });
            $('#closeCode').on('click', function() {
                $('.show').hide();
            });
            //我要开团
            $('#showForms').on('click', function() {
                $('.group').show();
            });
            $('.register').on('click', function() {
                $('.group').show();
                event.stopPropagation();
            });
            $('.group').on('click', function() {
                $(this).hide();
            });
            //立即开团
            $('#form').on('submit', function() {
                var name=$('input[name=name]').val();
                var phone=$('input[name=mobile]').val();
                if (name==null || name==""){
                    alert("请填写姓名");
                    return false
                }else if(phone==null || phone=="") {
                    alert("请填写电话");
                    return false
                }
                    return true;
            });
            //参团列表
            $(function() {
                var list = $('.list');
                list.find('tr:even').css('background', '#fff');
                list.find('tr:odd').css('background', '#eee')
            });
        })
    </script>
  
</body>
</html>